<template>
  <!--商品头像-->
  <div class="product-picture">
    <div class="picture" :class="imageList.length > 1 ? 'pictures' : ''" v-for="(item, index) in imageList"
      @click="onViewImage(item)" :key="index">
      <img class="picture-image" :src="item" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "product-picture",
  props: {
    imageList: {
      default: function () {
        return [];
      },
      type: Array
    }
  },
  methods: {
    onViewImage(image) {
      // 查看图片
      this.$Modal.info({
        width: 520,
        closable: true,
        render: (h) => {
          return h('img', {
            attrs: {
              src: image,
            },
            style: {
              display: 'block',
              width: '100%'
            }
          })
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.product-picture {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 138px;
  height: 138px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid @t-border-color;

  .picture {
    cursor: pointer;
    flex: 0 0 138px;
    width: 138px;
    height: 138px;
    overflow: hidden;

    .picture-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .pictures {
    flex: 0 0 50%;
    width: 50%;
    overflow: hidden;
  }
}
</style>